<template>
  <a-form :model="value" :layout="layout" ref="filterSearch" :rules="config.rules" :label-col="{ span: labelCol }"
    :wrapper-col="{ span: wrapperCol }" autocomplete="off">
    <a-row style="width:100%;">
      <a-col :span="8" v-for="(item, index) in config.itemConfig">
        <a-form-item :label="item.label" :name="item.prop" :key="index">
          <a-input v-model:value="value[item.prop]" :allowClear="item.allowClear" :disabled="item.disabled"
            :placeholder="item.placeholder" v-if="item.type == 'input'" />
          <a-select v-else-if="item.type == 'select'" @change="item.func" :disabled="item.disabled"
            :allowClear="item.allowClear" v-model:value="value[item.prop]" :mode="item.tags"
            :placeholder="item.placeholder">
            <a-select-option v-for="(item, index) in item.optList" :value="item.codeValue || item.value"
              :key="item.codeValue || item.value">
              {{ item.codeName || item.label }}
            </a-select-option>
          </a-select>
          <a-date-picker :allowClear="item.allowClear" :disabled="item.disabled" :valueFormat="item.valueFormat"
            :format="item.format" v-else-if="item.type == 'date'" v-model:value="value[item.prop]"
            :show-time="item.showTime" :picker="item.picker" :placeholder="item.placeholder" />
          <a-range-picker :allowClear="item.allowClear" :disabled="item.disabled" :valueFormat="item.valueFormat"
            :format="item.format" v-else-if="item.type == 'dateRange'" v-model:value="value[item.prop]"
            :placeholder="item.placeholder" :show-time="item.showTime" :picker="item.picker" />
          <div v-else>无效</div>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row style="width:100%;">
      <a-form-item v-for="(item, index) in config.operate" :key="index">
        <a-button :type="item.type" :disabled="item.disabled" @click="hendelClik(item.handleClick, item.rule)">
          {{ item.name }}
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

defineProps({
  value: {
    type: Object,
    require: true,
    default: {}
  },
  config: {
    type: Object,
    require: true,
    default: {}
  },
  labelCol: {
    type: Number,
    default: 6,
  },
  wrapperCol: {
    type: Number,
    default: 18
  },
  layout: {
    type: String,
    default: "inline"
  }
})
const filterSearch = ref(null);
const hendelClik = async (func: any, bool: any) => {
  if (bool) {
    try {
      await filterSearch.value.validateFields();
      func();
    } catch (errorInfo) {
      return;
    }
  } else {
    filterSearch.value.clearValidate();
    func();
  }
}
</script>
<style scoped lang="less">
::v-deep(.ant-form-item) {
  margin-bottom: 10px;
}

.ant-picker {
  width: 100%;
}
</style>
